<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../sass/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <style>
    /* 轮播 */
    /* .banner {
            height: 450px;
            margin: auto;
            position: relative;
        }
        .tab1 li {
            text-align: center;
            line-height: 450px;
            background-color: #ff0;
            opacity: 0;
            transition: 1s;
            position: absolute;
            top: 0;
        }
        .tab1 img {
            width: 100%;
            height: 100%;
        }
        .tab1 .show {
            opacity: 1;
        }
        .tab2 {
            position: absolute;
            width: 100%;
            display: flex;
            bottom: 10px;
            justify-content: center;

        }
        .tab2 .on {
            border-color: red;
            color: red;
        }
        .tab2 li {
            width: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            border: 1px solid #000;
            margin: 5px;


        }

        .prev,
        .next {
            position: absolute;
            width: 20px;
            height: 40px;
            background-color: rgba(0, 0, 0.5);
            color: #fff;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            line-height: 40px;
        }
qqq
        .next {
            right: 0;
        } */
  </style>
</head>

<body>
  <!-- 导航 -->
  <div class="w head">
    <h1>
      <a href="">
        <img src="../images/1.png" alt="">
      </a>
    </h1>
    <ul class="head-nav">
      <li class="nav">
        <a href="">
          <p>All Products</p>
          <p>全部产品</p>
        </a>
      </li>
      <li class="nav head-nav1">
        <a href="">
          <p>Cake Series</p>
          <p>蛋糕系列</p>
        </a>
        <ul class="head-nav-menu">
          <li>
            <a href="">新品系列</a>
          </li>
          <li>
            <a href="">经典系列</a>
          </li>
          <li>
            <a href="">儿童系列</a>
          </li>
          <li>
            <a href="">尊爱系列</a>
          </li>
        </ul>
      </li>
      <li class="nav">
        <a href="">
          <p>Wagashi</p>
          <p>零食糕点</p>
        </a>
      </li>
      <li class="nav">
        <a href="">
          <p>About Us</p>
          <p>关于我们</p>
        </a>
      </li>

    </ul>
    <div class="head_right">
      <div class="head_span">
        <span class="span1 iconfont">&#xe62b;北京</span>
        <span class="span1 iconfont">
          &#xe6f3;<a href="">0件</a>
        </span>
        <span class="span1">
          <a href="">登录</a>
        </span>
        <span class="span1">
          <a href="">注册</a>
        </span>
      </div>
      <p class="phone iconfont">&#xe612; 400-700-5999</p>
      <div class="search">
        <span class="span1 iconfont">&#xe610;</span>
        <input class="input" type="text">
      </div>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="w banner">
    <ul class="tab1">
      <li class="imgs show">
        <img src="http://www.holiland.com/data/afficheimg/1598504852533599085.jpg" alt="">
      </li>
      <li class="imgs">
        <img src="http://www.holiland.com/data/afficheimg/1451241729614010049.jpg" alt="">
      </li>
      <li class="imgs">
        <img src="http://www.holiland.com/data/afficheimg/1598493274394300587.jpg" alt="">
      </li>
      <li class="imgs">
        <img src="http://www.holiland.com/data/afficheimg/1598490900870579898.jpg" alt="">
      </li>
    </ul>

    <ol class="tab2">
      <li class="dot on">1</li>
      <li class="dot">2</li>
      <li class="dot">3</li>
      <li class="dot">4</li>
    </ol>
    <span class="prev iconfont">&#xe617;</span>
    <span class="next iconfont">&#xe616;</span>
  </div>

  <div class="w list">
    <ul class="list-ul">
      <li class="list-li">
        <a href="">
          <img class="list-imgs" src="http://www.holiland.com/data/afficheimg/1598500925980827559.jpg
                " alt="">
        </a>
        <div class="list-wu">

        </div>
        <div class="list-div">
          <a href="">
            <p class="list-p">新品系列</p>
            <span class="list-span">NEW LINE</span>
          </a>
        </div>
      </li>
      <li class="list-li">
        <a href="">
          <img class="list-imgs" src="http://www.holiland.com/data/afficheimg/1598501091763038139.jpg
                " alt="">
        </a>
        <div class="list-wu">

        </div>
        <div class="list-div">
          <a href="">
            <p class="list-p">零食糕点</p>
            <span class="list-span">SNACK CAKE</span>
          </a>
        </div>
      </li>
      <li class="list-li">
        <a href="">
          <img class="list-imgs" src="http://www.holiland.com/data/afficheimg/1598501266604197328.jpg
                " alt="">
        </a>
        <div class="list-wu">

        </div>
        <div class="list-div">
          <a href="">
            <p class="list-p">新品系列</p>
            <span class="list-span">NEW LINE</span>
          </a>
        </div>
      </li>

    </ul>

  </div>
  <!-- 音频 -->
  <div class="w peisong">
    <div class="peisong-img">
      <img src="http://www.holiland.com/data/afficheimg/1556240157651442682.jpg" alt="">
    </div>
    <div class="peisong-video">
      <video id="theVideo" controls="" loop="false"
        poster="https://img.alicdn.com/imgextra/i2/2455221099/TB2ZMW8hHZnBKNjSZFGXXbt3FXa_!!2455221099.jpg"
        style="cursor: pointer;" height="420" width="745">
        <source src="http://cloud.video.taobao.com//play/u/2455221099/p/1/e/6/t/1/50071310842.mp4" type="video/mp4" />
      </video>
    </div>
  </div>
  <div class="w list">
    <ul class="list-ul">
      <li class="list-li">
        <a href="">
          <img class="list-imgs" src="http://www.holiland.com/data/afficheimg/1528259724147241527.jpg
                " alt="">
        </a>
        <div class="list-wu">

        </div>
        <div class="list-div">
          <a href="">
            <p class="list-p">配送包</p>
            <span class="list-span">DELIVERY PACKAGE</span>
          </a>
        </div>
      </li>
      <li class="list-li">
        <a href="">
          <img class="list-imgs" src="http://www.holiland.com/data/afficheimg/1458096609174521318.jpg

                " alt="">
        </a>
        <div class="list-wu">

        </div>
        <div class="list-div">
          <a href="">
            <p class="list-p">店面形象</p>
            <span class="list-span">STORE IMAGES</span>
          </a>
        </div>
      </li>
      <li class="list-li">
        <a href="">
          <img class="list-imgs" src="http://www.holiland.com/data/afficheimg/1458039189338219135.jpg

                " alt="">
        </a>
        <div class="list-wu">

        </div>
        <div class="list-div">
          <a href="">
            <p class="list-p">配送服务</p>
            <span class="list-span">DELIVERY SERVICE</span>
          </a>
        </div>
      </li>

    </ul>

  </div>
  <!-- 底部 -->
  <div class="w  footerhelp">
    <p class="footerhelp-p  open"> 帮助中心 <i class="iconfont">&#xe618;</i> </p>
    <div class="footmenu">
      <dl>
        <dt class="bg0">
          <i class="iconfont">&#xe62d;</i>购物指南
        </dt>
        <dd> <a href="/article.php?id=7" title="购物流程">购物流程</a> </dd>
        <dd> <a href="/article.php?id=9" title="蛋糕尺寸">蛋糕尺寸</a> </dd>
      </dl>
      <dl>
        <dt class="bg1">
          <i class="iconfont">&#xe62d;</i>订购范围
        </dt>
        <dd> <a href="/article.php?id=12" title="地图查询">地图查询</a> </dd>
        <dd> <a href="/article.php?id=13" title="团购业务">团购业务</a> </dd>
      </dl>
      <dl>
        <dt class="bg2">
          <i class="iconfont">&#xe62d;</i>公司服务
        </dt>
        <dd> <a href="/article.php?id=14" title="储值卡">储值卡</a> </dd>
        <dd> <a href="/article.php?id=44" title="北京门店">北京门店</a> </dd>
        <dd> <a href="/article.php?id=77" title="官网营业资质">官网营业资质</a> </dd>
      </dl>
      <dl>
        <dt class="bg3">
          <i class="iconfont">&#xe62d;</i>企业招聘
        </dt>
        <dd> <a href="/article.php?id=17" title="好利来招聘">好利来招聘</a> </dd>
        <dd> <a href="/article.php?id=18" title="黑天鹅招聘">黑天鹅招聘</a> </dd>
        <dd> <a href="/article.php?id=81" title="好利来招聘wap">好利来招聘wap</a> </dd>
      </dl>
      <dl>
        <dt class="bg4">
          <i class="iconfont">&#xe62d;</i>售后服务
        </dt>
        <dd> <a href="/article.php?id=19" title="投诉渠道">投诉渠道</a> </dd>
        <dd> <a href="/article.php?id=21" title="客服中心">客服中心</a> </dd>
        <dd> <a href="/article.php?id=72" title="加盟维权">加盟维权</a> </dd>
      </dl>
      <dl>
        <dt class="bg6"> <i class="iconfont">&#xe62d;</i>友情链接</dt>
        <dd> <a href="http://www.blackswancake.com/" title="黑天鹅蛋糕官网" target="_blank">黑天鹅蛋糕官网</a> </dd>
        <dd> <a href="http://www.luohongartmuseum.com" title="罗红摄影艺术馆" target="_blank">罗红摄影艺术馆</a> </dd>
        <dd> <a href="http://www.baidu.com/" title="百度" target="_blank">百度</a> </dd>
      </dl>
    </div>
  </div>
  <div class="h_footer">
    <span style="cursor: pointer;">

      <p style="display:flex">
        <text style="white-space: nowrap;margin-right: 20px;">Copyright2010 &#169;北京市好利来食品有限公司 版权所有</text>
        <text style="flex-shrink:0">京icp备15012142号 </text><a target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011302003412"
          style="text-decoration:none;height:20px;line-height:20px;display:flex"><img
            src="http://www.holiland.com/statics/images/gongan.png" style="float:left;" /><span
            style="float:left;width: initial;white-space: nowrap;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备
            11011302003412号</span></a>
      </p>
      <p>好利来 中国创造 since1992 请勿相信任何加盟信息 </p>
      好利来官方邮箱：info@holiland.com <br>
      <!-- 好利来建议邮箱：jianyi@holiland.com <br> -->

      <p>客服电话：400-700-5999</p>
      <p>注册地址：北京市朝阳区观音堂文化大道甲6号北201室<br />食品流通许可证号：JY11105421052989 <a class="layuiLayerShade"
          data-name="foodCirculationLicenseImg" style="color: #898989;">查看</a><br />统一社会信用代码：91110105721420005Y <a
          class="layuiLayerShade" data-name="licenseImg" style="color: #898989;">查看</a></p>
    </span>
    <div class="h_footerright">
      <h4> FOLLOW US </h4>
      <div class="jiathis_style_24x24 h">
        <a title="分享到新浪微博" class="jiathis_button_tsina"></a>
        <a class="h_weixin" title="微信关注我们"></a>
      </div>
      <div class="h_fenxiang">
        <p> 在微信上关注我们 </p>
        <img src="http://www.holiland.com/statics/images/weixin.jpg">
      </div>
    </div>
  </div>
  <script src="../js/jquery.js"></script>
  <script>

    $('.footerhelp-p').on('click', function () {
      if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).next().hide();
      } else {
        $(this).addClass('open');
        $(this).next().show();
      }
    });




    // 获取所有的元素
    var oLis1 = document.querySelectorAll(".tab2 li")
    var oLis2 = document.querySelectorAll(".tab1 li")
    var oNext = document.querySelector('.next');
    var oPrev = document.querySelector('.prev');
    var index = 0;
    var t = null;
    // 自动轮播
    // autoPlay()
    // 循环绑定
    // 点击切换
    // 文档失去焦点
    window.onblur = function () {
      clearInterval(t)
    }
    // 文档获取焦点
    window.onfocus = function () {
      autoPlay()
    }
    $('.banner').onmouseover = function () {
      console.log(666);
      clearInterval(t)
    }
    $('.banner').onmouseout = function () {
      console.log(7777);
      autoPlay()
    }
    oLis1.forEach(function (v, i) {
      v.onclick = function () {
        // 清除所有，显示当下 index
        clearInterval(t)
        index = i;
        renderDom()
        autoPlay()
      }
    })
    //    上一页
    oPrev.onclick = function () {
      clearInterval(t)
      index--
      if (index <= -1) {
        index = oLis1.length - 1;
      }

      renderDom()


    }
    // 下一页
    oNext.onclick = function () {
      clearInterval(t)
      index++
      if (index >= oLis1.length) {
        index = 0;
      }
      renderDom()


    }

    // 自动轮播封装

    function autoPlay() {
      t = setInterval(function () {
        index++;
        if (index === oLis1.length) {
          index = 0
        }
        renderDom()

      }, 2000)
    }


    // 清除所有展现当前
    function renderDom() {
      oLis1.forEach(function (key, item) {
        oLis1[item].classList.remove('on')
        oLis2[item].classList.remove('show');
      })
      oLis1[index].classList.add('on');
      oLis2[index].classList.add('show');
    }




        // function getStyle(ele, property) {
        //     if (window.getComputedStyle) {
        //         return getComputedStyle(ele)[property]
        //     }
        //     return ele.currentStyle[property]
        // }

        // function $(selector) {
        //     return document.querySelector(selector)
        // }

  </script>
</body>

</html>